<template>
  <div class="real-time-command">
    <!-- 搜索表单 -->
    <div class="filterContent">
      <a-form :model="filterForm" layout="inline">
        <a-form-item label="调令名称">
          <a-input
            v-model:value="filterForm.commandName"
            placeholder="请输入调令名称"
            class="formInput"
            allow-clear
          />
        </a-form-item>
        <a-form-item label="调令编号">
          <a-input
            v-model:value="filterForm.commandCode"
            placeholder="请输入调令编号"
            class="formInput"
            allow-clear
          />
        </a-form-item>

        <a-form-item label="调控日期">
          <a-range-picker
            v-model:value="filterForm.dateRange"
            format="YYYY-MM-DD"
            class="formInput"
          />
        </a-form-item>
        <a-form-item>
          <a-button type="primary" @click="handleSearch"> 查询 </a-button>
        </a-form-item>
      </a-form>
    </div>

    <!-- 数据表格 -->
    <div class="tableContent" ref="tableContainerRef">
      <a-table
        :dataSource="tableData"
        :columns="columns"
        :loading="tableLoading"
        :scroll="{ x: 'max-content' }"
        :pagination="false"
        bordered
      >
        <template #bodyCell="{ column, record }">
          <template v-if="column.key === 'commandList'">
            <a-space>
              <a-button
                type="link"
                size="small"
                @click="handleViewResourceList(record)"
              >
                查看
              </a-button>
            </a-space>
          </template>
        </template>
      </a-table>
    </div>

    <!-- 详情弹窗 -->
    <CommandDetailModal
      v-model:visible="detailModalVisible"
      :data="currentRecord"
    />

    <!-- 资源清单弹窗 -->
    <ResourceListModal
      v-model:resourceListVisible="resourceListVisible"
      :commandData="currentRecord"
    />
  </div>
</template>

<script setup>
import { ref, reactive, onMounted, inject } from "vue"
import { SearchOutlined } from "@ant-design/icons-vue"
import { message } from "ant-design-vue"
import ResourceListModal from "./components/ResourceListModal.vue"
import useTableScroll from "@/hooks/useTableScroll"

const $api = inject("$api")

// 响应式数据
const tableData = ref([])
const total = ref(0)
const tableLoading = ref(false)
const detailModalVisible = ref(false)
const resourceListVisible = ref(false)
const executeModalVisible = ref(false)
const currentRecord = ref({})

// 搜索表单
const filterForm = reactive({
  commandCode: "",
  commandName: "",
  dateRange: [],
  executeTimeRange: [],
  current: 1,
  size: 10,
})

// 表格列配置
const columns = [
  {
    title: "调令名称",
    dataIndex: "commandCode",
    key: "commandCode",
    width: 120,
    align: "center",
  },
  {
    title: "调令名称",
    dataIndex: "commandName",
    key: "commandName",
    width: 200,
    align: "center",
  },
  {
    title: "调令类型",
    dataIndex: "commandType",
    key: "commandType",
    width: 120,
    align: "center",
  },
  {
    title: "调控开始时间",
    dataIndex: "declareStartTime",
    key: "declareStartTime",
    width: 150,
    align: "center",
  },
  {
    title: "调控结束时间",
    dataIndex: "declareEndTime",
    key: "declareEndTime",
    width: 150,
    align: "center",
  },
  {
    title: "整体调节量(kW)",
    dataIndex: "commandCapacity",
    key: "commandCapacity",
    width: 120,
    align: "center",
  },
  {
    title: "调节资源清单",
    dataIndex: "commandList",
    key: "commandList",
    width: 130,
    align: "center",
  },
  /* {
    title: "操作",
    dataIndex: "handle",
    key: "handle",
    width: 150,
    align: "center",
    fixed: "right",
  }, */
]

// 搜索方法
const handleSearch = () => {
  filterForm.current = 1
  getList()
}

// 获取列表数据
const getList = async () => {
  try {
    tableLoading.value = true
    // 这里应该调用实际的API
    // const res = await $api.getRealTimeCommandList(filterForm)

    // 模拟数据
    const mockData = {
      records: [
        {
          id: 1,
          commandCode: "10001001",
          commandName: "2025年01号实时指令备案",
          commandType: "实时指令",
          declareStartTime: "2025-7-1 13:00:00",
          declareEndTime: "2025-7-1 17:00:00",
          commandCapacity: 150,
          commandPrice: 150,
        },
        {
          id: 2,
          commandCode: "10001002",
          commandName: "2025年02号实时指令备案",
          commandType: "实时指令",
          declareStartTime: "2025-7-2 13:00:00",
          declareEndTime: "2025-7-2 15:00:00",
          commandCapacity: 150,
          commandPrice: 150,
        },
        {
          id: 3,
          commandCode: "10001003",
          commandName: "2025年03号实时指令备案",
          commandType: "实时指令",
          declareStartTime: "2025-7-3 13:00:00",
          declareEndTime: "2025-7-3 14:00:00",
          commandCapacity: 150,
          commandPrice: 150,
        },
        {
          id: 4,
          commandCode: "10001004",
          commandName: "2025年04号实时指令备案",
          commandType: "实时指令",
          declareStartTime: "2025-7-4 13:00:00",
          declareEndTime: "2025-7-4 16:00:00",
          commandCapacity: 150,
          commandPrice: 150,
        },
        {
          id: 5,
          commandCode: "10001005",
          commandName: "2025年05号实时指令备案",
          commandType: "实时指令",
          declareStartTime: "2025-7-5 13:00:00",
          declareEndTime: "2025-7-5 14:00:00",
          commandCapacity: 150,
          commandPrice: 150,
        },
        {
          id: 6,
          commandCode: "10001006",
          commandName: "2025年06号实时指令备案",
          commandType: "实时指令",
          declareStartTime: "2025-7-6 13:00:00",
          declareEndTime: "2025-7-6 15:00:00",
          commandCapacity: 150,
          commandPrice: 150,
        },
      ],
      total: 6,
    }

    tableData.value = mockData.records
    total.value = mockData.total
  } catch (error) {
    message.error("获取数据失败")
  } finally {
    tableLoading.value = false
  }
}

// 查看资源清单
const handleViewResourceList = (record) => {
  currentRecord.value = record
  resourceListVisible.value = true
}

// 查看详情
const handleView = (record) => {
  currentRecord.value = record
  detailModalVisible.value = true
}

// 执行指令
const handleExecute = (record) => {
  currentRecord.value = record
  executeModalVisible.value = true
}

// 确认执行
const handleExecuteConfirm = async () => {
  try {
    // 这里应该调用实际的API
    // await $api.executeCommand(currentRecord.value.id)
    message.success("指令执行成功")
    executeModalVisible.value = false
    getList()
  } catch (error) {
    message.error("指令执行失败")
  }
}

// 获取状态颜色
const getStatusColor = (status) => {
  const colorMap = {
    pending: "orange",
    executing: "blue",
    completed: "green",
    failed: "red",
  }
  return colorMap[status] || "default"
}

// 使用表格滚动钩子
const tableContainerRef = ref(null)
const { tableScroll } = useTableScroll(tableData, tableContainerRef, 100)

// 页面加载时获取数据
onMounted(() => {
  getList()
})
</script>

<style scoped lang="less">
.real-time-command {
  height: 100%;
  display: flex;
  flex-direction: column;

  .filterContent {
    background-color: #1f1f1f;
    padding: 16px;
    border-radius: 4px;
    margin-bottom: 16px;

    .formInput {
      width: 200px;
    }

    .ant-form-item {
      margin-bottom: 0;
      margin-right: 16px;
    }
  }

  .tableContent {
    flex: 1;
    background-color: #1f1f1f;
    border-radius: 4px;
    padding: 16px;

    :deep(.ant-table) {
      background-color: transparent;

      .ant-table-thead > tr > th {
        background-color: #2a2a2a;
        border-bottom: 1px solid #434343;
        color: #fff;
      }

      .ant-table-tbody > tr > td {
        background-color: #1f1f1f;
        border-bottom: 1px solid #434343;
        color: #fff;
      }

      .ant-table-tbody > tr:hover > td {
        background-color: #2a2a2a;
      }
    }
  }
}
</style>
